<template>
    <div class="window column"
        v-show="view">
        <div class="row top">
            <i class="el-icon-close"
                @click="closeView"></i>
        </div>
        <div class="title row-center">
            <h2>欢迎来到JJ,请登陆</h2>
        </div>
        <div class="content column-center">
            <el-input v-model="input"
                placeholder="手机号/邮箱"></el-input>
            <el-input v-model="input"
                placeholder="密码"></el-input>
            <el-button type="primary">登陆JJ</el-button>
        </div>
        <div class="row tag">
            <el-checkbox v-model="checked">下次自动登陆</el-checkbox>
        </div>
        <div class="bottom row-center">
            <span>第三方登陆</span>
            <div class="row icon">
                <img src="../assets/img/qq.png"
                    alt>
                <img src="../assets/img/wx.png"
                    alt>
                <img src="../assets/img/wb.png"
                    alt>
            </div>
            <a href>注册豆瓣帐号</a>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        open: {
            type: Function,
            default: null
        },
        close: {
            type: Function,
            default: null
        }
    },
    data() {
        return {
            view: false
        }
    },
    methods: {
        openView() {
            this.view = true
            this.open && this.open()
        },
        closeView() {
            this.view = false
            this.close && this.close()
        }
    }
}
</script>

<style lang="less" scoped>
    .window {
        position: fixed;
        left: 30%;
        width: 480px;
        height: 380px;
        border: 1px solid dimgray;
        padding: 5px 5px 5px 5px;
        background: #fff;
        .top {
            justify-content: flex-end;
        }
        .title {
            padding-top: 40px;
            h2 {
                font-size: 25px;
                color: #111;
            }
        }
        .content {
            padding-left: 70px;
            padding-right: 70px;
            padding-top: 20px;
            .el-input {
                margin-bottom: 8px;
            }
        }
        .tag {
            margin-top: 8px;
            padding-left: 70px;
        }
        .bottom {
            margin-top: 60px;
            span {
                font-size: 13px;
                color: #666;
            }
            .icon {
                border-right: 1px solid slategray;
                img {
                    width: 16px;
                    height: 16px;
                    margin-right: 10px;
                    margin-left: 10px;
                }
            }
            a {
                margin-left: 20px;
                font-size: 13px;
                color: #37a;
                text-decoration: none;
                &:hover {
                    background: #4b8ccb;
                    color: #fff;
                }
            }
        }
    }
</style>
